.order-container {
  display: flex;

  .left-category-list {
    height: 100vh;
    background-color: #ffffff;

    .category-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 140rpx;
      width: 190rpx;
      box-sizing: border-box;
      background-color: #F0F1F2;
      border-left: 10rpx solid #F0F1F2;

      &.active {
        background-color: #ffffff;
        color: #007F61;
        border-left: 10rpx solid;
      }

      &.last {
        border-top-right-radius: 20rpx;
      }

      &.next {
        border-bottom-right-radius: 20rpx;
      }

      .category {
        font-size: 26rpx;
        text-align: center;
      }
    }
  }

  .right-goods-list {
    background-color: #ffffff;

    .goods {
      padding: 0 10rpx;
      width: 530rpx;
      height: 100vh;

      .t-swiper {
        height: 300rpx !important;
        margin-bottom: 20rpx;

        .t-swiper-host {
          height: 300rpx !important;

          .t-image {
            height: 100% !important;
          }
        }
      }

      .category-name {
        display: inline-block;
        font-size: 26rpx;
        text-align: center;
        line-height: 60rpx;
        background-color: #FFF7ED;
        color: #B79B5C;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        padding: 0 30rpx;
      }
    }
  }
}

.cart-container {
  height: 100rpx;
  width: 670rpx;
  position: fixed;
  z-index: 12000;
  bottom: 20rpx;
  margin: 0 40rpx;
  border-radius: 100rpx;
  background-color: #ffffff;
  border: 1rpx solid #f0f0f0;

  .cart {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 60rpx;

    .cart-info {
      height: 100rpx;
      width: 370rpx;
      display: flex;
      align-items: center;
      position: relative;

      .t-icon {
        margin-right: 20rpx;
      }

      .num {
        top: 6rpx;
        left: 45rpx;
        position: absolute;
        padding: 0 8rpx;
        background: #E00909;
        color: white;
        font-size: 20rpx;
        border-radius: 20rpx;
      }

      .goods-money {
        font-weight: 700;

        .money-logo {
          font-size: 24rpx;
        }

        .price {
          font-size: 34rpx;
        }
      }
    }

    .cart-btn {
      height: 100rpx;
      width: 240rpx;
      background-color: #008866;
      color: #ffffff;
      line-height: 100rpx;
      text-align: center;
      border-radius: 0 100rpx 100rpx 0;
    }
  }
}

.t-popup {
  padding: 30rpx 30rpx 0 30rpx;
  box-sizing: border-box;

  .t-popup__close {
    padding: 0;
    background-color: rgb(167, 165, 165);
    color: #ffffff;
    border-radius: 50%;

    .t-icon {
      font-size: 40rpx !important;
    }
  }

  .top-goods-info {
    display: flex;
    width: 690rpx;
    padding-bottom: 20rpx;

    .goods-image {
      width: 180rpx;
      height: 180rpx;
      padding-right: 20rpx;
    }

    .goods-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goods-name {
        font-weight: 700;
        font-size: 34rpx;
      }

      .gooods-choosen-taste {
        font-size: 24rpx;
        color: #ACACAC;
      }

      .goods-money {
        color: #E00909;
        font-weight: 700;

        .money-logo {
          font-size: 24rpx;
        }

        .price {
          font-size: 34rpx;
        }
      }
    }
  }

  .taste-list {
    padding-bottom: 140rpx;

    .taste-name {
      padding: 26rpx 0;
    }

    .amount-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .amount-name {
        font-size: 30rpx;
        background-color: #F0F1F2;
        border-radius: 10rpx;
        display: inline-block;
        padding: 12rpx 42rpx;
        text-align: center;
        position: relative;
      }

      .recommend::after {
        content: "推荐";
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        padding: 0 8rpx;
        background: #FF6E32;
        color: white;
        font-size: 20rpx;
        border-radius: 6rpx;
      }

      .active {
        background-color: #D0ECE7;
        color: #008866;
      }
    }
  }

  .submit {
    background-color: #ffffff;
    width: 690rpx;
    height: 140rpx;
    position: fixed;
    bottom: calc(0rpx + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;

    button {
      background-color: #008866;
      color: #ffffff;
      width: 100%;
    }
  }
}

.cart-popup {
  padding-left: 0;
  padding-right: 0;

  .cart-title-container {
    height: 80rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    position: fixed;
    padding: 0 30rpx 30rpx 30rpx;
    border-bottom: 1rpx solid #E5E5E5;
    box-sizing: border-box;

    .cart-title-btn {
      display: flex;
      align-items: center;
      color: #D1D1D1;
    }
  }

  .cart-goods-container {
    padding-top: 100rpx;
    padding-bottom: 140rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .cart-goods-detail {
      display: flex;
      margin-bottom: 20rpx;

      .goods-image {
        width: 150rpx;
        height: 150rpx;
        margin-right: 20rpx;
      }

      .cart-goods-info {
        width: 520rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .cart-goods-name {
          font-weight: 700;
          font-size: 36rpx;
        }

        .cart-goods-amount {
          color: #ACACAC;
          font-size: 26rpx;
        }

        .cart-add-goods {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .goods-money {
            color: #E00909;

            .money-logo {
              font-size: 24rpx;
            }

            .price {
              font-size: 30rpx;
            }
          }

          .num-control {
            display: flex;
            align-items: center;

            .num-btn {
              font-size: 32rpx;
              font-weight: 700;
              border: 1px solid #008866;
              width: 32rpx;
              height: 32rpx;
              line-height: 28rpx;
              text-align: center;
              border-radius: 30rpx;
              color: #008866;

              &.sub {
                margin-right: 15rpx;
              }

              &.add {
                background-color: #008866;
                color: #ffffff;
                margin-left: 15rpx;
              }
            }
          }
        }
      }
    }
  }
}

.goods-info-popup {

  .t-image {
    width: 690rpx;
    height: 450rpx;
    display: flex !important;
    justify-content: center;
    overflow: hidden;
    position: relative;
    margin-bottom: 20rpx;

    .t-image__img {
      position: absolute;
      top: -100rpx;
      width: 600rpx !important;
      height: 600rpx !important;
    }
  }

  .goods-info {
    width: 690rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 40rpx;

    .title {
      font-weight: 700;
      font-size: 34rpx;
      margin-bottom: 10rpx;
    }

    .tags {
      display: flex;
      margin-bottom: 10rpx;

      .tag {
        padding: 0 10rpx;
        margin-right: 8rpx;
        font-size: 20rpx;
        text-align: center;
        line-height: 40rpx;
        background-color: #F9F1D0;
        color: #D2A387;
        border-radius: 10rpx;
      }
    }

    .description {
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 20rpx;
    }

    .goods-add-cart {
      width: 690rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: calc(20rpx + env(safe-area-inset-bottom));

      .money-logo {
        font-size: 24rpx;
      }

      .price{
        font-size: 36rpx;
      }
    }
  }
}